.formkit-outer {
  margin: var(--fk-margin-outer);

  &[data-disabled] {
    opacity: 0.5;

    & [data-disabled] {
      opacity: 1;
    }
  }
}

.formkit-wrapper,
.formkit-fieldset {
  max-width: var(--fk-max-width-input);
}

.formkit-label {
  display: block;
  margin: var(--fk-margin-label);
  padding: var(--fk-padding-label);
}

.formkit-fieldset {
  margin: var(--fk-margin-fieldset);
  padding: var(--fk-padding-fieldset);
  border-radius: var(--fk-border-radius);
  border: var(--fk-border);

  &:focus-within {
    border: var(--fk-border-focus);
  }

  & > .formkit-help {
    margin-top: calc(var(--fk-padding-fieldset-t) * -0.5);
    margin-bottom: calc(var(--fk-padding-fieldset-t) * 1.5);
  }
}

.formkit-legend {
  display: block;
  margin: var(--fk-margin-legend);
  padding: var(--fk-padding-legend);
}

.formkit-inner {
  position: relative;
  box-shadow: var(--fk-border-box-shadow);
  border-radius: var(--fk-border-radius);
  display: flex;
  align-items: center;

  &:focus-within {
    box-shadow: var(--fk-border-box-shadow-focus);
  }
  /*
  @nest [data-invalid] &, [data-errors] & {
    box-shadow: var(--fk-border-box-shadow-invalid);
  }

  @nest [data-invalid] &:focus-within, [data-errors] &:focus-within {
    outline: var(--fk-error-ring) solid var(--fk-error-ring-focus-color);
    outline-offset: var(--fk-error-ring-offset);
  } */

  /* border removal for checkbox and radio inputs */
  @nest [data-type='checkbox'] &, [data-type='radio'] & {
    border: none;
    box-shadow: none;
    display: inline-block;

    @nest [data-invalid] &:focus-within, [data-errors] &:focus-within {
      outline: none;
    }
  }
}

.formkit-input {
  display: block;
  width: 100%;
  border-radius: var(--fk-border-radius);
  padding: var(--fk-padding-input);

  &[disabled] {
    background-color: var(--fk-bg-disabled);
  }

  &[multiple] {
    padding: 0;

    & option {
      padding: var(--fk-padding-input);
    }
  }

  @nest input[type='date']& {
    &::-webkit-calendar-picker-indicator {
      padding-top: 0;
      padding-bottom: 0;
      font-size: 0.875em;
    }

    &::-webkit-datetime-edit {
      line-height: 1;
      overflow: visible;
    }
  }

  @nest select& {
    padding-right: calc(var(--fk-padding-base) * 7);

    &[data-placeholder]:not([multiple]) {
      color: var(--fk-color-placeholder);

      & option {
        color: var(--fk-color-input);

        &[disabled] {
          color: var(--fk-color-disabled);
        }

        &[data-is-placeholder] {
          color: var(--fk-color-placeholder);
        }
      }
    }

    & option {
      font-size: var(--fk-font-size-option);
    }
  }

  @nest input[type='radio']& {
    & ~ .formkit-decorator {
      border-radius: var(--fk-border-radius-full);

      &::before {
        width: 50%;
        height: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: 0;
        border-radius: 2em;
      }
    }
  }
}

.formkit-help,
.formkit-option-help {
  margin: var(--fk-margin-help);
}

.formkit-messages {
  padding: var(--fk-padding-messages);
  margin: var(--fk-margin-messages);
}

.formkit-help + .formkit-messages {
  padding-top: 0;
}

.formkit-message {
  padding: var(--fk-padding-message);
  margin: var(--fk-margin-message);
}

.formkit-messages + .formkit-actions {
  margin-top: var(--fk-margin-outer-b);
}
